<template>
  <div class="w-box">
    <div class="w-box-header clearfix" v-el:header-el v-if="!boxNoHeader">
      <h5 v-if="boxTitle">{{ boxTitle }}</h5>
      <slot name="box-header-ext"></slot>
    </div>
    <div class="w-box-body" v-el:body-el>
      <h1 v-if="boxContent">{{ boxContent }}</h1>
      <small v-if="boxSecondaryContent">{{ boxSecondaryContent }}</small>
      <div class="container-fluid">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script type='text/babel'>
  export default {
    props: {
      boxTitle: String,
      boxContent: String,
      boxSecondaryContent: String,
      boxNoHeader: Boolean
    }
  }
</script>

<style lang="less">
  @box-background-color: #ffffff;
  @box-border-color: #e7eaea;

  .w-box {
    background-color: @box-background-color;
    margin-bottom: 20px;
    border-radius: 1px;
    border-top: 3px solid @box-border-color;
    box-shadow: 1px 1px 4px #dddddd;
    overflow: hidden;
  }

  .w-box .w-box-header {
    border-bottom: 1px solid @box-border-color;
    padding: 7px 15px;
  }

  .w-box .w-box-header > * {
    display: inline-block;
  }

  .w-box .w-box-header .w-box-header-ext {
    float: right;
  }

  .w-box .w-box-body {
    padding-bottom: 14px;
  }

  .w-box .w-box-body > h1 {
    margin: 14px 15px 0px;
    font-weight: lighter;
  }

  .w-box .w-box-body > small {
    margin: 0px 15px;
  }
</style>
